﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<anchored-heading :level="3">
				Hello world!
			</anchored-heading>
		</div>
		<script type = "text/javascript">
			var getChildrenTextContent = function (children) {
			  return children.map(function (node) {
			    return node.children
			      ? getChildrenTextContent(node.children)
			      : node.text
			  }).join('')
			}

			Vue.component('anchored-heading', {
				functional: true,
			  render: function (createElement, context) {
			    // 创建 kebab-case 风格的 ID
			    var headingId = getChildrenTextContent(context.children)
			      .toLowerCase()
			      .replace(/\W+/g, '-')
			      .replace(/(^-|-$)/g, '')
			    
			    return createElement(
			      'h' + context.props.level,
			      [
			        createElement('a', {
			          attrs: {
			            name: headingId,
			            href: '#' + headingId
			          }
			        }, context.slots().default)
			      ]
			    )
			  },
			  props: {
			    level: {
			      type: Number,
			      required: true
			    }
			  }
			})
			new Vue({
			  el: '#app'
			})
		</script>
	</body>
</html>